{include file="common/header" title="微语列表"}
{include file="common/crumb" subName="微语管理" tabName="微语列表"}
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
            <input type="text" name="search" placeholder="请输入关键词" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <table class="layui-table" id="table" lay-filter="table"></table>
</div>
<script type="text/html" id="toolbarTop">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn  layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe608;</i>增加
        </button>
    </div>
</script>
<script type="text/html" id="operation">
    <button class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改
    </button>
    <button class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除
    </button>
</script>

<script>
    layui.use(['table', 'form', 'laydate'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //执行表格实例化
        var table_instance = table.render({
            elem: '#table'
            , height: 'full-150'
            , toolbar: '#toolbarTop'
            , url: "{:url('lists')}"
            , method: 'post'
            , defaultToolbar: ['filter']
            , limit: 10
            , page: false
            , cols: [[
                {type: 'checkbox'},
                {field: 'id', title: 'ID', unresize: true, width: 90},
                {field: 'digests', title: '微语'},
                {field: 'create_time', title: '创建时间',width:190},
                {title: '操作', toolbar: "#operation", align: 'center', unresize: true, width: 170},
            ]]
        });
        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
        });

        //搜索
        form.on('submit(search)',function(data){
            console.log(data);
            //这里以搜索为例
            table_instance.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    where:{
                        search: data.field.search
                        ,start: data.field.start
                        ,end: data.field.end
                    }
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么',{icon:3}, function (index) {
                    $.post('{:url("del")}',{data:[data.id]},function(reg){
                        let icon = {icon:5};
                        if (0 === reg.code){
                            icon = {icon:6};
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        }
                        layer.msg(reg.msg,icon);
                    },'json');
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                x_admin_show('修改', '{:url("edit")}?id='+data['id'], 1200,600);
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case 'add':
                    x_admin_show('添加', '{:url("add")}', 1200,600);
                    break;
                case 'delAll':
                    if (0 === checkStatus.data.length){
                        layer.msg('至少选择一项',{icon:5});
                    }else{
                        let data = [];
                        layui.each(checkStatus.data,function(k,v){
                            data.push(v.id);
                        });
                        layer.confirm('真的要删除么',{icon:3}, function (index) {
                            //向服务端发送删除指令
                            $.post('{:url("del")}',{data:data},function(reg){
                                let icon = {icon:5};
                                if (0 === reg.code){
                                    icon = {icon:6};
                                }
                                layer.msg(reg.msg, icon,function(){
                                    layer.close(index);
                                    table_instance.reload();
                                });
                            },'json');
                        });
                    }
                    break;
            }
        });
    });
</script>
</body>

</html>